<template>
    <!-- 对话框 -->
    <submit-dialog
            v-model:dialogVisibleModel="dialogVisible"
            :dialogTitle="props.dialogTitle"
            @submit="handleSaveOrUpdateSubmit"
            @reset="resetForm"
    >
        <template #rows>
            <!-- 表单 -->
            <el-form
                    ref="ruleFormRef"
                    style="max-width: 600px"
                    :model="formData"
                    status-icon
                    label-width="auto"
                    class=""
            >
                <!-- 代码生成区域 -->
                    <el-form-item label="PK" prop="id">
                        <el-input v-model="formData.id" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="用户姓名" prop="name">
                        <el-input v-model="formData.name" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="用户头像" prop="avatar">
                        <el-input v-model="formData.avatar" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="账户或者电话" prop="phone">
                        <el-input v-model="formData.phone" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="formData.password" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="openid，来自微信第三方id" prop="openid">
                        <el-input v-model="formData.openid" autocomplete="off" />
                    </el-form-item>
            </el-form>
        </template>
    </submit-dialog>
</template>

<script setup>
/*
专用于：user.vue 的 子组件--用于submit提交使用
*/

import { ref } from "vue";
import {
            addUser,
            getUser,
            updateUser,
            listUser,
            deleteUser,
} from "@/api/auth/user/user.js";
import { ElMessageBox } from "element-plus";
import { User } from "@/model/user.d.js";
import { onMounted, watch } from "vue";
import { checkResult } from "@/utils/Rutil.js";
const update = "update";

const emit = defineEmits(["refreshList"])

// 传入id
const props = defineProps({
    id: {
        default: null,
    },
    type: {
        /* 类型有 insert 和 update*/
        default: "insert",
    },
    dialogTitle: {
        default: "title",
    },
});

// 定义给父亲组件
// 是否显示此dialog
// const dialogVisible = ref(false);
const dialogVisible = defineModel("dialogVisible", {
    default: false,
});

// 重置表单数据
const resetForm = () => {
    // 调用组件对象的时候，也需要使用value
    ruleFormRef.value.resetFields();
};

// 表单数据
const formData = ref(new User());
// el-dialog实体
const ruleFormRef = ref();
// 表单提交handle
const handleSaveOrUpdateSubmit = async () => {
    console.log("formData",formData.value)
    var codeCheck = false;
    if (props.type === "insert") {
        const res = await addUser(formData.value);
        console.log("handleSaveOrUpdateSubmit-addUser-res", res);
        codeCheck = checkResult(res)
    } else if (props.type === update) {
        const res = await updateUser(formData.value);
        console.log("handleSaveOrUpdateSubmit-updateUser-res", res);
        codeCheck = checkResult(res)
    }

    if (codeCheck) {
        dialogVisible.value = false;
        ElMessageBox({ message: "提交成功", type: "success" });
        resetForm();
    } else {
        ElMessageBox({ message: "提交失败", type: "error" });
    }
    emit("refreshList")
};

// 可以直接侦听dialogVisible，实现点击获取表单更新数据
watch(dialogVisible, async (newValue, oldValue) => {
    console.log("submit.vue is now Opened.");
    if (newValue === true && props.type === update && props.id !== null) {
        //   如果是修改，可以使用这个函数
        const res = await getUser(props.id);
        console.log("getUser-data", res.data);
        formData.value = res.data;
    }
});
// 暂时不需要使用
onMounted(async () => {});
</script>

<style lang="scss"></style>
